<template>
    <div class="container">
        <div class="header">
            <div class="search">
                <el-input @keyup.enter.native="findWeatherStationList" auto-complete="off" class="p-frame" placeholder="请输入编号或名称" type="text"
                    v-model="searchFrom.nameOrAddress"></el-input>
            </div>
            <el-button type="primary" @click="findWeatherStationList">查询</el-button>
            <el-button type="primary" @click="addWeatherDialog">新增</el-button>

        </div>
        <div class="content">
            <div class="tableWrapper">
                <el-table :header-row-style="HeaderStyle" :row-style='cellStyle' ref="multipleTable" border stripe :data="tableData"
                    style="width: 100%" class="tableLine">
                    <el-table-column prop="address" show-overflow-tooltip label="编号" align="center">
                    </el-table-column>
                    <el-table-column prop="name" show-overflow-tooltip label="名称" align="center">
                    </el-table-column>
                    <el-table-column prop="lon" show-overflow-tooltip label="经度" align="center">
                    </el-table-column>
                    <el-table-column prop="lat" show-overflow-tooltip label="纬度" align="center">
                    </el-table-column>
                    <el-table-column prop="remark" show-overflow-tooltip label="备注" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="dialogIndexList(scope.row)" class="pointer">气象因子</span><i class="line"></i>
                            <span @click="updateDetail(scope.row)" class="pointer">修改</span><i class="line"></i>
                            <span @click="deleteWeather(scope.row)" class="pointer">删除</span>
                            <!--<el-tooltip class="item" effect="dark" content="修改" placement="top">
                <el-button @click="updateDetail(scope.row)" type="text" title="修改">
                  <img src="../../../../assets/img/home/014.png">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button @click="deleteWeather(scope.row)" type="text" title="删除">
                  <img src="../../../../assets/img/home/015.png">
                </el-button>
              </el-tooltip>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" :title="detailEditType == 'edit' ? '修改气象站信息' : '添加气象站'" width="650px"
            :visible.sync="dialogFormVisible">
            <el-form labelPosition='right' class="demo-ruleForm" :rules="rulesAdd" ref="ruleAddForm" :inline="true" :model="addForm"
                label-width="100px">
                <div class="form-table_col2">
                    <table border="1" width="100%">
                        <tr>
                            <td class="form-item_label">编号</td>
                            <td>
                                <el-input v-model="addForm.address" auto-complete="off" class="el-inputs"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>名称</td>
                            <td>
                                <el-input v-model="addForm.name" auto-complete="off" class="el-inputs"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td style="height:40px;line-height:40px">经度</td>
                            <td class="el-inputs" style="height:40px;line-height:40px">
                                <!-- <el-input v-model="addForm.lon" auto-complete="off" class="el-inputs"></el-input> -->
                                <LonLat ref="lonRef" @child-event="lonEvent"  v-if ="isReady" :msg-val="chilLon"/>
                            </td>
                        </tr>
                        <tr>
                            <td style="height:40px;line-height:40px">纬度</td>
                            <td class="el-inputs" style="height:40px">
                                <LonLat ref="latRef" @child-event="latEvent"  v-if ="isReady"  :msg-val="chilLat"/>
                                <!-- <el-input v-model="addForm.lat" auto-complete="off" class="el-inputs"></el-input> -->
                            </td>
                        </tr>
                        <tr>
                            <td>账号</td>
                            <td>
                                <el-input v-model="addForm.loginName" auto-complete="off" class="el-inputs"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>密码</td>
                            <td>
                                <el-input type="password" v-model="addForm.password" auto-complete="off" class="el-inputs"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>状态</td>
                            <td>
                                <el-select v-model="addForm.onLine" class="el-inputs">
                                    <el-option :value="true" :label="'在线'"></el-option>
                                    <el-option :value="false" :label="'离线'"></el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td style="display:table-cell; vertical-align:middle">备注</td>
                            <td>
                                <el-input type="textarea" :autosize="{ minRows: 5}" v-model="addForm.remark"></el-input>
                            </td>
                        </tr>
                    </table>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="detailEditType == 'edit'" type="primary" @click="updateDetailSubmit('ruleAddForm')">修 改
                </el-button>
                <el-button v-else type="primary" @click="addWeatherStation('ruleAddForm')">添 加</el-button>
                <el-button type="primary" @click="cancelT">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" title="气象因子列表" :visible.sync="dialogIndexVisible" :before-close="cancel">
            <div class="headerIndex">
                <div class="search">
                    <el-input auto-complete="off" class="p-frame" placeholder="请输入因子名称" type="text" v-model="indexName"></el-input>
                </div>
                <el-button type="primary" @click="findPageIndex">查询</el-button>
                <el-button type="primary" @click="addIndexDialog">新增</el-button>

            </div>
            <div class="content">
                <el-table ref="multipleTable" border stripe :data="indexData" style="width: 100%" class="tableLine">
                    <el-table-column prop="no" show-overflow-tooltip label="编号" align="center">
                    </el-table-column>
                    <el-table-column prop="name" show-overflow-tooltip label="名称" align="center">
                    </el-table-column>
                    <el-table-column prop="unit" show-overflow-tooltip label="单位" align="center">
                    </el-table-column>
                    <el-table-column prop="refMaxValue" show-overflow-tooltip label="最大值" align="center">
                    </el-table-column>
                    <el-table-column prop="refMinValue" show-overflow-tooltip label="最小值" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="dialogIndex(scope.row)" class="pointer">修改</span><i class="line"></i>
                            <span @click="deleteIndex(scope.row)" class="pointer">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer">
                <div class="paging info">
                    <el-pagination :page-size="this.pageSize" :page-sizes="[10,15]" :total="tableDataTotalCount" @current-change="handleCurrentChange"
                        @size-change="handleSizeChange" background layout="total, prev, pager, next">
                    </el-pagination>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogIndexVisible = false" class="dialogBtn">取 消</el-button>
            </div>
        </el-dialog>
        <el-dialog :close-on-click-modal="false" :title="indexEditType == 'edit' ? '修改气象因子' : '新增气象因子'" :visible.sync="dialogFactorVisible"
            :width="'30%'">
            <el-form labelPosition='right' class="demo-ruleForm" :inline="false" :rules="rulesAddIndex" ref="ruleAddIndexForm" :model="factorForm"
                label-width="100px">
                <el-form-item label="编号" prop="no">
                    <el-input-number class="el-inputs" v-model="factorForm.no" :min="1" auto-complete="off"></el-input-number>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input class="el-inputs" v-model="factorForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="unit">
                    <el-input class="el-inputs" v-model="factorForm.unit" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="最大值" prop="refMaxValue">
                    <el-input class="el-inputs" v-model="factorForm.refMaxValue" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="最小值" prop="refMinValue">
                    <el-input class="el-inputs" v-model="factorForm.refMinValue" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="indexEditType == 'edit'" class="dialogBtn" type="primary" @click="updateIndex('ruleAddIndexForm')">修 改
                </el-button>
                <el-button v-else type="primary" @click="addIndex('ruleAddIndexForm')" class="dialogBtn">添 加</el-button>
                <el-button type="primary" @click="dialogFactorVisible = false" class="dialogBtn">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import weatherApi from '@/api/weatherApi'
import LonLat from '../../../../components/LatLon'

export default {
    name: 'MeteorologicalData',
    components: {
        LonLat
    },
    data() {
        return {
            searchFrom: {
                nameOrAddress: ''
            },
            cellStyle: { height: '55px', fontSize: '16px' },
            HeaderStyle: { height: '60px', fontSize: '16px' },
            dialogFormVisible: false,
            dialogFactorVisible: false,
            dialogIndexVisible: false,
            detailEditType: 'detail', // 'edit',
            indexEditType: 'detail',
            tableData: [],
            indexData: [],
            pageIndex: 1,
            pageSize: 10,
            TableDataTotalCount: '',
            factorForm: {},
            addForm: {},
            rulesAdd: {
                address: [
                    { required: true, message: '请填写编号', trigger: 'blur' }
                ]
            },
            rulesAddIndex: {
                no: [
                    { required: true, message: '请填写编号', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请填名称', trigger: 'blur' }
                ],
                unit: [
                    { required: true, message: '请填写单位', trigger: 'blur' }
                ]
            },
            stationId: '',
            indexName: '',
            chilLon:'',
            chilLat:'',
            isReady:false
        }
    },
    computed: {
        tableDataTotalCount() {
            return this.TableDataTotalCount ? this.TableDataTotalCount : 0
        }
    },
    created() {
        this.findWeatherStationList()
    },
    methods: {
        //经度
        lonEvent(val){
        this.addForm.lon = val;
        },

        latEvent(val){
        this.addForm.lat = val;
        },

        cancelT(){
            this.dialogFormVisible = false
            this.isReady = false;
            this.$refs.lonRef.initData();
            this.$refs.latRef.initData();
        },
        findWeatherStationList() {
            weatherApi.findWeatherStationList(this.searchFrom).then((res) => {
                if (res.status === 200 && res.data.result !== null) {
                    this.tableData = res.data.result
                }
            })
        },
        updateDetail(row) {
            var id = row.id
            weatherApi.getWeatherInfo(id).then((res) => {
                if (res.status === 200 && res.data.result !== null) {
                    var result = res.data.result
                    this.addForm = Object.assign({}, result)
                    this.isReady = true;
                    this.chilLon = this.addForm.lon;
                    this.chilLat = this.addForm.lat;
                }
            })
            this.dialogFormVisible = true
            this.detailEditType = 'edit'
        },
        addWeatherDialog() {
            this.detailEditType = 'add'
            this.dialogFormVisible = true
            this.addForm = {}
            this.isReady = true;
        },
        addWeatherStation(formName) {
            if (!this.addForm.address) {
                this.$message({
                    message: '请输入编号',
                    type: 'warning'
                })
                return false
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.addForm)
                    weatherApi.addWeather(params).then((res) => {
                        if (res.data.messageType === '0') {
                            this.$notify({
                                title: '消息',
                                message: ('添加成功!'),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'success'
                            })
                            this.dialogFormVisible = false
                            this.addForm = {}
                            this.findWeatherStationList()
                        } else {
                            this.$notify({
                                title: '消息',
                                message: (res.data.message),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        updateDetailSubmit(formName) {
            if (!this.addForm.address) {
                this.$message({
                    message: '请输入编号',
                    type: 'warning'
                })
                return false
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.addForm)
                    weatherApi.updataWeather(params).then((res) => {
                        if (res.data.messageType === '0') {
                            this.addForm = Object.assign({}, this.initAddForm)
                            this.$notify({
                                title: '消息',
                                message: ('操作成功!'),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'success'
                            })
                            this.dialogFormVisible = false
                            this.findWeatherStationList()
                        }
                    })
                } else {
                    return false
                }
            })
        },
        deleteWeather(row) {
            let tips = ''
            let id = ''
            if (row) {
                tips = `此操作将删除气象站: ${row.name}, 是否继续?`
                id = row.id
            } else {
                return
            }
            this.$confirm(tips, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                weatherApi.deleteWeather(id).then((res) => {
                    if (res.data.messageType === '0') {
                        this.$notify({
                            title: '消息',
                            message: ('删除成功！'),
                            position: 'bottom-right',
                            showClose: false,
                            type: 'success'
                        })
                        this.findWeatherStationList()
                    }
                })
            }).catch((error) => {
                console.log(error)
            })
        },
        dialogIndexList(row) {
            this.dialogIndexVisible = true
            this.stationId = row.id
            this.findPageIndex()
        },
        findPageIndex() {
            weatherApi.findPageIndex({
                name: this.indexName,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
                stationId: this.stationId,
                sort: 'no',
                order: 'ASC'
            }).then((res) => {
                if (res.data.messageType === '0') {
                    this.indexData = res.data.result.rows
                    this.TableDataTotalCount = res.data.result.totalCount
                } else {
                    this.indexData = []
                    this.TableDataTotalCount = 0
                }
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.indexData = []
            this.findPageIndex()
        },
        handleCurrentChange(val) {
            this.pageIndex = val
            this.indexData = []
            this.findPageIndex()
        },
        cancel() {
            this.indexData = []
            this.indexName = ''
            this.TableDataTotalCount = 0
            this.dialogIndexVisible = false
        },
        dialogIndex(row) {
            this.indexEditType = 'edit'
            this.dialogFactorVisible = true
            
            weatherApi.getIndexInfo(row.id).then((res) => {
                if (res.data.messageType === '0') {
                    this.factorForm = res.data.result
                    
                }
            })
        },
        addIndexDialog() {
            this.indexEditType = 'add'
            this.dialogFactorVisible = true
        },
        addIndex(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.factorForm)
                    params.stationId = this.stationId
                    weatherApi.addIndex(params).then((res) => {
                        if (res.data.messageType === '0') {
                            this.$notify({
                                title: '消息',
                                message: ('添加成功!'),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'success'
                            })
                            this.dialogFactorVisible = false
                            this.factorForm = {}
                            this.findPageIndex()
                        } else {
                            this.$notify({
                                title: '消息',
                                message: (res.data.message),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        updateIndex(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.factorForm)
                    weatherApi.updateIndex(params).then((res) => {
                        if (res.data.messageType === '0') {
                            this.$notify({
                                title: '消息',
                                message: ('修改成功!'),
                                position: 'bottom-right',
                                showClose: false,
                                type: 'success'
                            })
                            this.dialogFactorVisible = false
                            this.factorForm = {}
                            this.findPageIndex()
                        }
                    })
                } else {
                    return false
                }
            })
        },
        deleteIndex(row) {
            let tips = ''
            if (row) {
                tips = `此操作将删除气象因子: ${row.name}, 是否继续?`
            } else {
                return
            }
            this.$confirm(tips, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                weatherApi.deleteIndex(row.id).then((res) => {
                    if (res.data.messageType === '0') {
                        this.$notify({
                            title: '消息',
                            message: ('删除成功！'),
                            position: 'bottom-right',
                            showClose: false,
                            type: 'success'
                        })
                        this.findPageIndex()
                    }
                })
            }).catch((error) => {
                console.log(error)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.container {
}
.el-inputs {
    background-color: #32f1ff16;
    border: 1px solid #fff;
    border-radius: 0;
}

.header {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 30px 0 20px 0;
    .handle {
        width: 80px;
        margin-left: 5px;
        margin-right: 50px;
    }

    .btn {
        width: 80px;
        cursor: pointer;
        border: none;
        padding: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        background: rgba(14, 107, 183, 0.9);
        margin-left: 35px;
        border-right: 0;
    }

    .search {
        width: 350px;
        height: 45px;
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        /*border: 1px solid #0E6BB7;*/
        margin-right: 10px;
        .p-frame {
            -webkit-appearance: none;
            background-color: transparent;
            background-image: none;
            border-radius: 0;
            color: #fff;
        }
    }
}
.headerIndex {
    height: 45px;
    display: flex;
    flex-direction: row;
    margin: 0px 0 20px 0;
    .handle {
        width: 80px;
        margin-left: 5px;
        margin-right: 50px;
    }

    .btn {
        width: 80px;
        cursor: pointer;
        border: none;
        padding: 10px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        background: rgba(14, 107, 183, 0.9);
        margin-left: 35px;
        border-right: 0;
    }

    .search {
        width: 350px;
        height: 45px;
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
/deep/ .el-input__inner {
    color: #ffffff;
    font-size: 1.5rem;
    height: 45px;
    background-color: transparent;
    outline: 0;
}

/deep/ .el-form--inline .el-form-item {
    text-align: right;
}
.content {
    /*height: 631px;*/
    /*width: 1726px;*/
    /*background-color: deepskyblue;*/
    /*.tableWrapper /deep/ .el-table--border th{*/
    /*  height: 80px;*/
    /*}*/

    .tableWrapper {
        .line {
            display: inline-flex;
            height: 21px;
            width: 1px;
            background: rgba(0, 255, 255, 1);
            margin: 0 10px;
            vertical-align: middle;
        }

        .pointer {
            cursor: pointer;
        }
    }

    .tableWrapper /deep/ .el-checkbox__inner {
        height: 29px;
        width: 29px;
        /*background-color: #ffffff;*/
        font-size: 28px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        background: none;
    }

    .tableWrapper /deep/ .el-tooltip__popper {
        background-color: red;
    }

    .tableWrapper /deep/ .el-checkbox__inner::after {
        border-width: 2px;
        /*border-color: black;*/
        height: 9px;
        left: 10px;
        top: 6px;
        width: 6px;
    }

    .tableWrapper
        /deep/
        .el-checkbox__input.is-indeterminate
        .el-checkbox__inner::before {
        top: 12px;
        background: white;
    }
}

.dialog /deep/ .el-dialog {
    width: 45%;
}

.dialogBtn {
    font-size: 1.6rem;

    &:hover {
        background: rgba(12, 161, 151, 1);
    }
}

.deleteText {
    font-size: 1.8rem;
}
.footer {
    margin-top: 40px;
    color: #ffffff;
    font-size: 16px;

    .info {
        .select {
            width: 52px;
            height: 35px;
        }

        .select /deep/ .el-input__inner {
            padding-left: 5px;
            padding-right: 0;
        }

        .select /deep/ .el-input__icon {
            width: 15px;
        }

        .select /deep/ .el-select__caret.is-reverse {
        }
    }

    .paging {
        text-align: right;
        padding-right: 30px;
        margin-top: -20px;

        & /deep/ .el-pagination.is-background .btn-prev {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pagination.is-background .btn-next {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pager li {
            background: none;
            border: 1px solid rgba(0, 255, 255, 1);
        }

        & /deep/ .el-pagination__total,
        & /deep/ .el-pagination__sizes {
            float: left;
            font-size: 1.6rem;
            height: 35px;
            line-height: 35px;
        }

        & /deep/ .el-input__inner {
            height: 35px;
        }

        & /deep/ .el-input .el-input__inner {
            padding-right: 20px;
            color: #ffffff;
            font-size: 1.6rem;
        }
    }
}
</style>
